<template>
	<view class="expert-page">
		<u-navbar :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0)" title="会员中心"></u-navbar>
		<view v-if="level == 0">
			<view class="content">
				<view class="vip-head">
					<view class="unlock">
						未解锁
					</view>
					<view class="head">
						<view class="head-left">
							<image src="https://m.lqvvvv.com/assets/static/my/gradev0.png" mode=""></image>
							<!-- <image src="https://m.lqvvvv.com/assets/static/my/gradev3.png" mode=""></image> -->
						</view>
						<image class="vip-logo" src="https://m.lqvvvv.com/assets/static/my/v1-logo.png" mode=""></image>
						<!-- <image class="vip-logo" src="https://m.lqvvvv.com/assets/static/my/v2-logo.png" mode=""></image> -->
						<!-- <image class="vip-logo" src="https://m.lqvvvv.com/assets/static/my/v3-logo.png" mode=""></image> -->
					</view>
					<view class="upgrade">
						<view class="upgrade-top">
							<view class="upgrade-num">
								{{info.score}}/1000
							</view>
							<view>
								消费满1000即可升级VIP1
							</view>
						</view>
						<view class="progress">
							<u-line-progress :percentage="info.score" height="7" activeColor="#688cbe" inactiveColor="#7CA4E0" 
								:showText="false"></u-line-progress>
						</view>
					</view>
				</view>
				<view class="title">
					当前已获得<text>2项</text>权益
				</view>
				<view class="privilege">
					<view class="privilege-item" v-for="(item,index) in privilege1" :key="index">
						<view class="privilege-left">
							<image :src="item.img" mode=""></image>
							<view class="privilege-info">
								<view class="info-title">
									{{item.title}}
								</view>
								<view class="info-text">
									{{item.text}}
								</view>
							</view>
						</view>
						<!-- <view class="privilege-btn">
							查看详情
						</view> -->
					</view>
				</view>
			</view>
			<view class="interests">
				<view class="interests-title">
					VIP1等级<text>共3项</text>权益
				</view>
				<view class="interests-box">
					<view class="interests-item" v-for="(item,index) in interestsV1" :key="index">
						<image :src="item.img" mode=""></image>
						<view class="interests-text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="level == 1">
			<view class="content">
				<view class="vip-head v2-head">
					<view class="unlock">
						未解锁
					</view>
					<view class="head">
						<view class="head-left">
							<view class="new-img">
								<image src="https://m.lqvvvv.com/images/vip_new/gradev1.png" mode=""></image>
							</view>
						</view>
						<!-- <image class="vip-logo" src="https://m.lqvvvv.com/assets/static/my/v1-logo.png" mode=""></image> -->
						<image class="vip-logo" src="https://m.lqvvvv.com/assets/static/my/v2-logo.png" mode=""></image>
						<!-- <image class="vip-logo" src="https://m.lqvvvv.com/assets/static/my/v3-logo.png" mode=""></image> -->
					</view>
					<view class="upgrade"> 
						<view class="upgrade-top">
							<view class="upgrade-num">
								{{info.score}}/2000
							</view>
							<view>
								消费满2000即可升级VIP2
							</view>
						</view>
						<view class="progress">
							<u-line-progress :percentage="info.score" height="7" activeColor="#dfb35a" inactiveColor="#ECBD5F"
								:showText="false"></u-line-progress>
						</view>
					</view>
				</view>
				<view class="title">
					当前已获得<text>3项</text>权益
				</view>
				<view class="privilege">
					<view class="privilege-item" v-for="(item,index) in privilege2" :key="index">
						<view class="privilege-left">
							<image :src="item.img" mode=""></image>
							<view class="privilege-info">
								<view class="info-title">
									{{item.title}}
								</view>
								<view class="info-text">
									{{item.text}}
								</view>
							</view>
						</view>
						<!-- <view class="privilege-btn">
							查看详情
						</view> -->
					</view>
				</view>
			</view>
			<view class="interests">
				<view class="interests-title">
					VIP2等级<text>共4项</text>权益
				</view>
				<view class="interests-box">
					<view class="interests-item" v-for="(item,index) in interestsV2" :key="index">
						<image :src="item.img" mode=""></image>
						<view class="interests-text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="level >= 2">
			<view class="content">
				<view class="vip-head v3-head">
					<view class="unlock">
						未解锁
					</view>
					<view class="head">
						<view class="head-left">
							<view class="new-img">
								<image src="https://m.lqvvvv.com/images/vip_new/gradev2.png" mode=""></image>
							</view>
							<!-- <view class="head-tips">
								这里是部分会员权益内容
							</view> -->
						</view>
						<image class="vip-logo" src="https://m.lqvvvv.com/images/vip_new/v3-logo.png" mode=""></image>
					</view>
					<view class="upgrade">
						<view class="upgrade-top">
							<view class="upgrade-num">
								{{info.score}}/5000
							</view>
							<view>
								消费满5000即可升级VIP3
							</view>
						</view>
						<view class="progress">
							<u-line-progress :percentage="info.score" height="7" activeColor="#688cbe" inactiveColor="#5DA8F0"
								:showText="false"></u-line-progress>
						</view>
					</view>
				</view>
				<view class="title">
					当前已获得<text>4项</text>权益
				</view>
				<view class="privilege">
					<view class="privilege-item" v-for="(item,index) in privilege3" :key="index">
						<view class="privilege-left">
							<image :src="item.img" mode=""></image>
							<view class="privilege-info">
								<view class="info-title">
									{{item.title}}
								</view>
								<view class="info-text">
									{{item.text}}
								</view>
							</view>
						</view>
						<!-- <view class="privilege-btn">
							查看详情
						</view> -->
					</view>
				</view>
			</view>
			<view class="interests">
				<view class="interests-title">
					VIP3等级<text>共5项</text>权益
				</view>
				<view class="interests-box">
					<view class="interests-item" v-for="(item,index) in interestsV3" :key="index">
						<image :src="item.img" mode=""></image>
						<view class="interests-text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				level: 0,
				info:{},
				privilege1: [{
						title: '客服咨询',
						text: '为用户提供客服咨询服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege1.png'
					},
					{
						title: '接单认证',
						text: '为用户提供无限语音畅聊服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege2.png'
					},
				],
				privilege2: [{
						title: '客服咨询',
						text: '为用户提供客服咨询服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege1.png'
					},
					{
						title: '接单认证',
						text: '为用户提供无限语音畅聊服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege2.png'
					},
					{
						title: '专属图标',
						text: '为用户提供专属图标服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege3.png'
					}
				],
				privilege3: [{
						title: '客服咨询',
						text: '为用户提供客服咨询服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege1.png'
					},
					{
						title: '接单认证',
						text: '为用户提供无限语音畅聊服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege2.png'
					},
					{
						title: '专属图标',
						text: '为用户提供专属图标服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege3.png'
					},
					{
						title: '查看动态',
						text: '为用户提供专属图标服务',
						img: 'https://m.lqvvvv.com/assets/static/my/privilege3.png'
					}
				],
				interestsV1: [{
						title: '客服咨询',
						img: 'https://m.lqvvvv.com/assets/static/my/v1-icon1.png'
					},
					{
						title: '接单认证',
						img: 'https://m.lqvvvv.com/assets/static/my/v1-icon2.png'
					},
					{
						title: '专属图标',
						img: 'https://m.lqvvvv.com/assets/static/my/v1-icon3.png'
					},
				],
				interestsV2: [{
						title: '客服咨询',
						img: 'https://m.lqvvvv.com/assets/static/my/v2-icon1.png'
					},
					{
						title: '接单认证',
						img: 'https://m.lqvvvv.com/assets/static/my/v2-icon2.png'
					},
					{
						title: '专属图标',
						img: 'https://m.lqvvvv.com/assets/static/my/v2-icon3.png'
					},
					{
						title: '查看动态',
						img: 'https://m.lqvvvv.com/assets/static/my/v2-icon4.png'
					},
				],
				interestsV3: [{
						title: '客服咨询',
						img: 'https://m.lqvvvv.com/assets/static/my/v3-icon1.png'
					},
					{
						title: '接单认证',
						img: 'https://m.lqvvvv.com/assets/static/my/v3-icon2.png'
					},
					{
						title: '专属图标',
						img: 'https://m.lqvvvv.com/assets/static/my/v3-icon3.png'
					},
					{
						title: '查看动态',
						img: 'https://m.lqvvvv.com/assets/static/my/v3-icon4.png'
					},
					{
						title: '赠送礼物',
						img: 'https://m.lqvvvv.com/assets/static/my/v3-icon5.png'
					}
				]
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		methods: {
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.level = res.data.level
					} else {
						this.info = {}
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.expert-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;

		.content {
			padding: 30rpx;

			.vip-head {
				height: 297rpx;
				background-image: url('https://m.lqvvvv.com/assets/static/my/v1-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 297rpx;
				padding: 30rpx;
				position: relative;

				.unlock {
					position: absolute;
					top: 3rpx;
					left: 50rpx;
					color: #365789;
					font-size: 22rpx;
				}

				.head {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.head-left {
						margin-top: 20rpx;

						.head-tips {
							margin-top: 10rpx;
							color: #eeeeee;
							font-size: 22rpx;
						}

						image {
							width: 178rpx;
							height: 61rpx;
						}
					}

					.new-img {
						image {
							width: 178rpx;
							height: 51rpx;
						}

					}

					.vip-logo {
						width: 189rpx;
						height: 185rpx;
						margin-top: -70rpx;
					}
				}

				.upgrade {
					margin-top: 60rpx;

					.upgrade-top {
						display: flex;
						color: #3D4D87;
						font-size: 22rpx;

						.upgrade-num {
							margin-right: 30rpx;
						}
					}

					.progress {
						margin-top: 20rpx;
					}
				}
			}

			.v2-head {
				background-image: url('https://m.lqvvvv.com/images/vip_new/v2-bg.png');
			}

			.v3-head {
				background-image: url('https://m.lqvvvv.com/images/vip_new/v3-bg.png');
			}

			.title {
				margin-top: 40rpx;
				padding: 10rpx 0;
				font-weight: bold;
				color: #000000;
				font-size: 32rpx;

				text {
					color: #E78D05;
				}
			}

			.privilege {
				.privilege-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.privilege-left {
						display: flex;
						align-items: center;

						image {
							width: 88rpx;
							height: 88rpx;
						}

						.privilege-info {
							margin-left: 30rpx;

							.info-title {
								color: #000000;
								font-size: 28rpx;
							}

							.info-text {
								color: #999999;
								font-size: 24rpx;
								margin-top: 10rpx;
							}
						}
					}

					.privilege-btn {
						color: #ffffff;
						font-size: 28rpx;
						padding: 14rpx 17rpx;
						border-radius: 30rpx;
						background-color: #A3A2FF;
					}
				}
			}
		}

		.interests {
			background-color: #ffffff;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			padding: 40rpx;
			margin-top: 30rpx;
			height: 717rpx;

			.interests-title {
				margin-bottom: 20rpx;
				padding: 20rpx 0;
				font-weight: bold;
				color: #000000;
				font-size: 32rpx;

				text {
					color: #E78D05;
				}
			}

			.interests-box {
				display: flex;
				justify-content: space-around;

				.interests-item {
					text-align: center;
					margin-right: 20rpx;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.interests-text {
						color: #2D2D2D;
						font-size: 28rpx;
						margin-top: 20rpx;
					}
				}
			}

		}
	}
</style>